import { Table, message, Popconfirm, Space, Modal, Row, Col, Form, Input, Pagination, Tooltip, Image as AntdImage } from "antd";
import { useModel, Outlet, useLocation, history } from "umi";
import { Card as SemiCard, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle, IconDelete, IconEdit, IconEyeOpened, IconTick } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";
import { useEffect, useState } from "react";
const { Search } = Input;

const AddRecommendCommodity = () => {
    const { onCloseGlobalModal } = useModel("global.modal");
    const [selectedMerchant, setSelectedMerchant] = useState(null);
    const [form] = Form.useForm();
    const { imageBase64 } = useModel("global");
    const { TextArea } = Input;

    const loadData = () => {};

    const state = useReactive({
        dataLoading: false,
        pageSize: 0,
        page: 0,
    });
    useEffect(() => {
        loadData();
    }, []);
    const onSearch = () => {};
    return (
        <div style={{ padding: 20 }}>
            <Search
                placeholder="请输入商品全称"
                onSearch={onSearch}
                style={{
                    width: 200,
                }}
            />
            <div style={{ marginTop: 10 }}></div>

            <Table bordered={false} size="small" dataSource={[1]} rowKey="ciUuid" pagination={false} style={{ marginTop: 1 }}>
                <Table.Column title="顺序" align="center" width={60} render={(_, r, i) => i + 1} />
                <Table.Column
                    title="商品图片"
                    dataIndex="ciPict"
                    key="ciName"
                    align="left"
                    width={80}
                    render={(_, r) => <AntdImage preview width={60} height={60} src={imageBase64} fallback={imageBase64} />}
                />
                <Table.Column title="商品全称" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column title="商品单位" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column title="商品原价" dataIndex="ciName" key="ciName" align="left" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />
                <Table.Column title="商品会员价" dataIndex="ciName" key="ciName" align="left" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />

                <Table.Column title="操作" width={90} dataIndex="ciSepr" key="ciSepr" align="right" render={(_) => <Button>添加</Button>} />
            </Table>
            <div style={{ display: "flex", justifyContent: "space-between", height: 48, borderTop: "1px solid #ccc" }}>
                <div></div>
                <div style={{ marginTop: 12 }}>
                    <Pagination
                        total={state.totalCount}
                        showTotal={(total, range) => `当前显示第 ${range[0]}-${range[1]} 条，共 ${total} 条`}
                        pageSize={state.pageSize}
                        current={state.page}
                        showSizeChanger={false}
                        onChange={(page) => (state.page = page)}
                    />
                </div>
            </div>
        </div>
    );
};

export default AddRecommendCommodity;
